
<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-17 18:17:03
 * @LastEditTime: 2023-11-21 08:59:29
 * @LastEditors: sueRimn
-->

<template>
  <view class="item d-flex justify-content-between" :class="active > 1 ? 'disable' : ''">
    <view class="left d-flex flex-column">
      <view class="left-value d-flex align-items-end">
        <view class="yuan">¥</view>
        {{ item.bonusValue }}
      </view>
      <view class="left-desc">满{{ item.bonusAmount }}元可用</view>

    </view>
    <view class="right">
      <view class="right-name">{{ item.bonusName }}</view>
      <view class="right-time">有效期至{{ item.usedEnd }}</view>
    </view>
    <view class="btn" @click="handleBtn(item)">
      <text v-if="active == 1">去使用</text>
      <text v-else-if="active == 2">
        已使用
      </text>
      <text v-else>
        已过期
      </text>
    </view>
  </view>
</template>


<script>
export default {
  props: {
    item: { type: Object, default: {} },
    active: { type: Number, default: 0 }
  },
  methods: {
    handleBtn() {
      if(this.active > 1) return
      uni.navigateTo({
        url: '/pages/category/index'
      })
    }
  }
}
</script>


<style lang="scss" scoped>
.item {
  padding: 32rpx;
  margin: 32rpx 12rpx;
  background-color: #fff;
  color: #999;
  border-radius: 16rpx;
  border: solid 1px #fff;

  &.disable {
    background: #f8f8f8;
    border: solid 1px #ddd;

    .left-value {
      color: #d8d8d8;
    }

    .left-desc {
      color: #d8d8d8;
    }

    .right {
      border-left: 1px dashed #d8d8d8;

      .right-name {
        color: #d8d8d8;
      }

      .right-time {
        color: #d8d8d8;
      }
    }

    .btn {
      background-color: #d8d8d8;
    }
  }

  .left {
    text-align: center;
  }

  .left-value {
    font-size: 42rpx;
    font-weight: bold;
    color: var(--hui-color-primary);


    .yuan {
      font-size: var(--hui-font-size-26);
      margin: 0 5rpx 5rpx 0;
    }
  }

  .left-desc {
    font-size: 24rpx;
    color: var(--hui-color-subtitle);
    margin: 15rpx 0;
  }

  .left-time {
    font-size: 24rpx;
    color: var(--hui-color-primary);
  }

  .right {
    border-left: 1px dashed var(--hui-color-primary);
    padding: 0 24rpx;

    .right-name {
      font-size: var(--hui-font-size-30);
      color: var(--hui-color-title);

    }

    .right-time {
      font-size: 24rpx;
      color: var(--hui-color-subtitle);
      margin: 24rpx 0 0 0;
    }
  }

  .btn {
    width: 136rpx;
    height: 54rpx;
    line-height: 54rpx;
    font-size: var(--hui-font-size-24);
    background-color: var(--hui-color-primary);
    color: #fff;
    border-radius: 50rpx;
    text-align: center;
    margin: 24rpx 0 0 0;
  }

  .right-icon {
    position: absolute;
    bottom: 15rpx;
    right: 3rpx;
    display: inline-block;
    transform: rotate(-25deg);
    font-size: 20rpx;

    &::before {
      position: absolute;
      bottom: -35rpx;
      right: -25rpx;
      content: "";
      display: inline-block;
      width: 100rpx;
      height: 100rpx;
      background: url(https://image.chushouya.com/uploads/file/20231121/20231121085916_316.png) no-repeat;
      background-size: 100%;
    }
  }
}
</style>